<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="echarts" id="centerBottomChart"></div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ECharts, EChartsOption, init } from "echarts";
import { graphic } from "echarts/core";
import * as echarts from "echarts";

// 初始化图表
const initChart = (data: any): ECharts => {
  const charEle = document.getElementById("centerBottomChart") as HTMLElement;
  const charEch: ECharts = init(charEle);
  const option: EChartsOption = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF"
      },
      formatter: function (params: any) {
        // 添加单位
        let result = params[0].name + "<br>";
        params.forEach(function (item: any) {
          if (item.value) {
            if (item.seriesName == "安装率") {
              result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>";
            } else {
              result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>";
            }
          } else {
            result += item.marker + " " + item.seriesName + " :  - </br>";
          }
        });
        return result;
      }
    },
    legend: {
      data: ["已安装", "计划安装", "安装率"],
      textStyle: {
        color: "#B4B4B4"
      },
      top: "0"
    },
    grid: {
      left: "50px",
      right: "40px",
      bottom: "30px",
      top: "20px"
    },
    xAxis: {
      data: data.category,
      axisLine: {
        lineStyle: {
          color: "#B4B4B4"
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4"
          }
        },

        axisLabel: {
          formatter: "{value}"
        }
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4"
          }
        },
        axisLabel: {
          formatter: "{value}% "
        }
      }
    ],
    series: [
      {
        name: "已安装",
        type: "bar",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#956FD4" },
            { offset: 1, color: "#3EACE5" }
          ])
        },
        data: data.barData
      },
      {
        name: "计划安装",
        type: "bar",
        barGap: "-100%",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(156,107,211,0.8)" },
            { offset: 0.2, color: "rgba(156,107,211,0.5)" },
            { offset: 1, color: "rgba(156,107,211,0.2)" }
          ])
        },
        z: -12,
        data: data.lineData
      },
      {
        name: "安装率",
        type: "line",
        smooth: true,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 8,
        yAxisIndex: 1,
        itemStyle: {
          color: "#F02FC2"
        },
        data: data.rateData
      }
    ]
  };
  charEch.setOption(option);
  return charEch;
};
defineExpose({
  initChart
});
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>
